<template>
	<el-form :model="queryParams" ref="formRef" :inline="true" label-position="left">
		<template v-for="item in config" :key="item.prop">
			<el-form-item :label="item.label" :prop="item.prop" :style="item.style || defaultStyle">
				<!-- input -->
				<el-input
					v-if="item.type === 'input'"
					v-model="queryParams[item.prop]"
					v-bind="item.attrs"
					@keyup.enter="emitSearch"
				/>

				<!-- select -->
				<el-select v-else-if="item.type === 'select'" v-model="queryParams[item.prop]" v-bind="item.attrs">
					<el-option v-for="opt in item.options" :key="opt.value" :label="opt.label" :value="opt.value" />
				</el-select>

				<!-- daterange -->
				<el-date-picker
					v-else-if="item.type === 'daterange'"
					v-model="queryParams[item.prop]"
					v-bind="item.attrs"
				/>
			</el-form-item>
		</template>

		<!-- 操作按钮 -->
		<el-form-item>
			<el-button type="primary" @click="emitSearch">
				<template #default>
					<i-ep-search class="m-r-4px" />
					搜索
				</template>
			</el-button>
			<el-button @click="emitReset">
				<template #default>
					<i-ep-refresh class="m-r-4px" />
					重置
				</template>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import type { ConfigItem } from "@/components/SearchForm/type.ts";
//vue3.4以后最新写法
const queryParams = defineModel<any>("queryParams");

defineProps<{ config: Array<ConfigItem> }>();

const emit = defineEmits(["search", "reset"]);
const emitSearch = () => emit("search");
const emitReset = () => emit("reset");

const defaultStyle = {
	width: "240px",
};
</script>

<style scoped lang="scss">
:deep(.el-form-item--label-right .el-form-item__label) {
	font-weight: 700 !important;
}
</style>
